<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue的生命周期</title>
    <script type="text/javascript" src="../assests/js/vue.js"></script>
</head>
<body>
    <h1>vue的生命周期</h1>
    <hr>
    <div id="app">
        <p>{{ count }}</p>
        <button v-on:click="add" >ADD</button>
        
       
        <ul>
            <li @click="selected=1" :style="[pointer]">点击显示box1--name</li>
            <li @click="selected=2" :style="{cursor:pointer.cursor}">点击显示box2--email</li>
        </ul>
        <ul>
            <keep-alive>
                <lzm-a type1="name" v-if="selected==1" /> </lzm-a>
                <lzm-b type1="email" v-else /></lzm-b>
            </keep-alive>
        </ul>
    </div>
    <template id="tpl1">
        <div>
            <li v-if="type1=='name'">
                <label for="name">请输入姓名</label>
                <input type="text" id="name" key="123" placeholder="please enter name">
            </li>
            <li v-else-if="type1=='email'">
                <label for="email">请输入email</label>
                <input type="text" id="email" key="1231" placeholder="please enter email">
            </li>
        </div>
    </template>
    <button onclick="app.$destroy()">销毁</button>
    <script>
        Vue.component("lzm-a",{
            updated(){
                // console.log(this.props)
            },
            props:["type1"],
            template:"#tpl1",
            activated:function(){
                console.log("lzm-a-----activated");
            },
            deactivated:function() {
                console.log("lzm-a-----deactivated");
            },
        })
        Vue.component("lzm-b",{
            updated(){
                // console.log(this.props)
            },
            props:["type1"],
            template:"#tpl1",
            activated:function(){
                console.log("lzm-b-----activated");
            },
            deactivated:function() {
                console.log("lzm-b-----deactivated");
            },
        })
        var app = new Vue({
            el:"#app",
            data:{
                count:1,
                selected:1,
                pointer:{
                    cursor:"pointer"
                }
            },
            methods:{
                add:function(){
                    this.count++;
                }
            },
            beforeCreate:function(){
                console.log("1-----beforeCreate");
            },
            created:function(){
                console.log("2-----created");
            },
            beforeMount:function(){
                console.log("3-----beforeMount");
            },
            mounted:function(){
                console.log("4-----mounted");
            },
            beforeUpdate:function(){
                console.log("5-----beforeUpdate");
            },
            updated:function(){
                console.log("6-----updated");
            },
            activated:function(){
                console.log("vue-7-----activated");
            },
            deactivated:function() {
                console.log("vue-8-----deactivated");
            },
            beforeDestroy:function(){
                console.log("9-----beforeDestroy");
            },
            destroyed:function(){   
                console.log("10-----destroyed");
            }
        });
    </script>
</body>
</html>